<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <link rel="stylesheet" href="css/formPage.css" />
    <link rel="stylesheet" href="css/formBox.css" />
  </head>
  <body>
    <div id="app">
      <!-- <div class="form">
        <form @submit.prevent="submitForm" autocomplete="off">
          <ul>
            <li>
              <label for="user">用户名：</label>
              <input type="text" v-model="userInput" name="user" id="user" />
              <span v-show="!isUserValid">用户名必须为6~12位英文字母或数字</span>
            </li>
            <li>
              <label for="password">密码：</label>
              <input
                type="password"
                v-model="passwordInput"
                name="password"
                id="password"
              />
              <span v-show="!isPasswordValid">密码必须为6~12位英文字母或数字</span>
            </li>
            <li>
              <label for="gender">性别：</label>
              <label for="man">男</label>
              <input
                type="radio"
                name="gender"
                v-model="gender"
                id="man"
                value="0"
              />
              <label for="woman">女</label>
              <input
                type="radio"
                name="gender"
                v-model="gender"
                id="woman"
                value="1"
              />
              <span v-show="!gender">性别不得为空</span>
            </li>
            <li>
              <label for="card-id">身份证号：</label>
              <input type="text" name="cardID" v-model="cardIDInput" id="card-id" />
              <span v-show="!isCardIDValid">请输入正确的身份证号</span>
            </li>
            <li>
              <label for="phone">手机号：</label>
              <input type="text" name="phone" v-model="phoneInput" id="phone" />
              <span v-show="!isPhoneValid">手机号必须为11位数字</span>
            </li>
            <li>
              <button type="submit" :disabled="!isFormValid">保存</button>
            </li>
          </ul>
        </form>
      </div> -->

      <form-info-box></form-info-box>
    </div>
    <script src="/js/vue.js"></script>
    <script src="/js/formBox.js"></script>
    <script>
      new Vue({
        el: "#app",
      });
    </script>
  </body>
</html>
